<template>
	<view class="detail">
		<!-- 头部标签栏 -->
		<view class="detail-header">
			<text class="header-left-icon"  @click="goback"></text>
			<view class="header-right">
				<text class="left-icon"></text>
				<text class="right-icon"></text>
			</view>
		</view>

		<view class="detail-section">
			<view class="detail-title">
				<view class="dateil-title-left">
					<view class="title-icon">
						<image :src="newsDetail.user_avators" mode="aspectFit"></image>
					</view>
					<view class="news-name">
						<view class="p-name">{{newsDetail.media}}</view>
						<view class="p-time">{{newsDetail.publish_time}}</view>
					</view>
				</view>
				<view :class="isFollow?'dateil-follow-not':'dateil-follow'" @click="userFollow(newsDetail.user_id)">{{isFollow?'已关注':'关注'}}</view>
			</view>

			<view class="news-img">
				<image v-if="/.*thepaper.*/gi.test(newsDetail.head_img)"
					:src="`https://images.weserv.nl/?url=${newsDetail.head_img}`" mode="aspectFill"></image>
				<image v-else :src="`${newsDetail.head_img}`" mode="aspectFill"></image>
			</view>

			<view class="news-content">
				<view class="news-location">{{newsDetail.tag}}</view>
				<view class="news-title">{{newsDetail.title}}</view>
				<view class="news-article">{{newsDetail.content}}</view>
			</view>
		</view>

		<view class="detail-fooder">
			<view class="fooder-left">
				<view class="fooder-like">
					<text class="fooder-like-icon" :class="isLike?'like-icon':'notlike-icon'" @click="uesrLike"></text>
					<text class="like-p">{{likecount}}</text>
				</view>
				<view class="fooder-comments" @click="goComments(newsDetail.id)">
					<text class="comments-icon"></text>
					<text class="comments-p"></text>
				</view>
			</view>
			<view class="fooder-right" :class="isBookmark?'bookmark':'notbookmark'" @click="userBookmarkNews"></view>
		</view>
	</view>
</template>

<script>
	import {
		getDetail,
		addFollow,
		removeFollow,
		getFollow,
		addLike,
		removeLike,
		getLike,
		likeCount,
		addBookmark,
		removeBookmark,
		getBookmark,
		addLook
	} from "@/api/request"
	export default {
		data() {
			return {
				user_id:"",
				isFollow:false,
				isLike:false,
				isBookmark:false,
				likecount:0,
				newsDetail: {},
			}
		},
		methods: {
			//去评论
			goComments(id){
				// console.log(id);
				uni.navigateTo({
					url:"/pages/comments/comments?id=" + id
				})
			},
			//判断是否收藏
			getNewsBookmark(news_id){
				let data = {
					user_id:this.user_id,
					news_id
				};
				// console.log(data);
				getBookmark(data).then(content=>{
					// console.log(content);
					let { code,data} = content
					if(code==200){
						if(data.length==0){
							this.isBookmark=false
						}
						if(data.length==1){
							this.isBookmark = true
						}
					}
				})
			},
			//收藏和取消收藏
			userBookmarkNews(){
				if(this.isBookmark==false){
					let newsDetail = this.newsDetail;
					let data={
						user_id:this.user_id,
						news_id:newsDetail.id,
						news_category:newsDetail.category,
						news_tag:newsDetail.tag,
						news_title:newsDetail.title,
						news_img:newsDetail.head_img,
						news_time:newsDetail.publish_time,
						news_media:newsDetail.media,
						user_avators:newsDetail.user_avators
					}
					// console.log(data);
					addBookmark(data).then(content=>{
						// console.log(content);
						if(content.code==200){
							uni.showToast({
								title:"收藏成功",
								icon:"none"
							})
							this.isBookmark = true
						}
					})
				}else{
					let data={
						user_id:this.user_id,
						news_id:this.newsDetail.id
					};
					removeBookmark(data).then(content=>{
						// console.log(content);
						if(content.code==200){
							uni.showToast({
								title:"取消收藏",
								icon:"none"
							})
							this.isBookmark = false
						}
					})
				}
			},
			//判断是否点赞
			getNewsLikeList(news_id){
				let data = {
					user_id:this.user_id,
					news_id,
				}
				getLike(data).then(content=>{
					// console.log("aaa",content);
					let { code,data } = content
					if(code==200){
						if(data.length==0){
							this.isLike=false
						}
						if(data.length==1){
							this.isLike=true
						}
					}
				})
			},
			//点赞和取消点赞
			uesrLike(){
				if(this.isLike==false){
					let data = {
						user_id:this.user_id,
						news_id:this.newsDetail.id
					};
					addLike(data).then(content=>{
						// console.log(content);
						this.isLike = true 
						this.likecount++
						uni.showToast({
							title:"点赞成功",
							icon:"none"
						})
					})
				}else{
					let data = {
						user_id:this.user_id,
						news_id:this.newsDetail.id
					};
					removeLike(data).then(content=>{
						// console.log(content);
						this.isLike = false 
						this.likecount--
						uni.showToast({
							title:"取消点赞",
							icon:"none"
						})
					})
				}
				
			},
			//获取点赞数量
			getNewsLikeCount(news_id){
				let data = {
					news_id,
				}
				likeCount(data).then(content=>{
					// console.log(content);
					this.likecount = content[0]["COUNT(*)"]
				})
			},
			//判断是否关注
			getUserFollowList(){
				let that = this;
				let data= {
					user_id:this.user_id
				}
				getFollow(data).then(content=>{
					// console.log("1111",content);
					let { code,data } = content
					if(code==200){
						// console.log(this.newsDetail.user_id);
						for(let i =0;i<data.length;i++){
							if(data[i].follow_user==that.newsDetail.user_id){
								that.isFollow=true
								break;
							}
						}
						
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			//点击关注和取消关注
			userFollow(user_id){
				if (this.isFollow == false) {
					let newsDetail = this.newsDetail;
					let data = {
						user_id:this.user_id,
						follow_user: newsDetail.user_id,
						follow_name: newsDetail.media,
						follow_avators: newsDetail.user_avators
					}
					// console.log(data);
					addFollow(data).then(content => {
						// console.log(content);
						let {
							code,
							msg
						} = content
						if (code == 200) {
							uni.showToast({
								title: "关注成功",
								icon: "none"
							})
							this.isFollow = true
						}
					}).catch(err => {
						console.log(err);
					})
				} else {
					let newsDetail = this.newsDetail;
					let data = {
						user_id: this.user_id,
						follow_user: newsDetail.user_id,
					}
					removeFollow(data).then(content => {
						let {
							code,
							msg
						} = content
						if (code == 200) {
							uni.showToast({
								title: "取关成功",
								icon: "none"
							})
							this.isFollow = false
						}
					}).catch(err => {
						console.log(err);
					})
				
				}
			},
			//返回上一层
			goback(){
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			},
			//获取新闻详情
			async getNewsDetail(id) {
				// console.log(id);
				let data = {
					id
				}
				uni.showLoading({
					title: "加载中..."
				})
				await getDetail(data).then(content => {
					// console.log("1111==>",content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.newsDetail = data[0]
						// console.log(this.newsDetail);
						this.addUserLook();
					}
				}).catch(err => {
					console.log(err);
				})
				await this.getUserFollowList();
				uni.hideLoading();
				
			},
			addUserLook(){
				let data={
					user_id:this.user_id,
					news_id:this.newsDetail.id,
					news_category:this.newsDetail.category,
					news_tag:this.newsDetail.tag,
					news_title:this.newsDetail.title,
					news_img:this.newsDetail.head_img,
					news_time:this.newsDetail.publish_time,
					news_media:this.newsDetail.media,
					user_avators:this.newsDetail.user_avators
				}
				// console.log(data);
				addLook(data).then(content=>{
					// console.log(content);
				})
			}
		},
		async onLoad(e) {
			// console.log(e);
			this.user_id = localStorage.getItem("user_id");
			await this.getNewsDetail(e.id);
			this.getNewsLikeCount(e.id);
			this.getNewsLikeList(e.id);
			this.getNewsBookmark(e.id);
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		position: relative;
		width: 100%;
		padding: $uni-box-padding;
	}

	.detail-fooder {
		width: 100%;
		height: 140rpx;
		box-shadow: 0px -5px 10px -8px #999;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.fooder-left {
			width: 100%;
			display: flex;
			align-items: center;

			.fooder-like {
				display: flex;
				align-items: center;
				
				.fooder-like-icon{
					display: block;
					width: 48rpx;
					height: 48rpx;
					background-repeat: no-repeat;
					background-size: 100%;
				}

				.like-icon {
					background-image: url("@/static/image/like.png");
				}
				.notlike-icon{
					background-image: url("@/static/image/notlike.png");
				}

				.like-p {
					padding-left: 8rpx;
					font-size: 32rpx;
					color: #313131;
				}
			}

			.fooder-comments {
				margin-left: 50rpx;
				display: flex;
				align-items: center;

				.comments-icon {
					display: block;
					width: 48rpx;
					height: 48rpx;
					background-image: url("@/static/image/comments.png");
					background-repeat: no-repeat;
					background-size: 100%;
				}

				.comments-p {
					padding-left: 8rpx;
					font-size: 32rpx;
					color: #313131;
				}
			}
		}

		.fooder-right {
			margin-right: 20rpx;
			width: 48rpx;
			height: 48rpx;
			background-repeat: no-repeat;
			background-size: 100%;
		}
		.notbookmark{
			background-image: url("@/static/image/notbookmark.png");
		}
		.bookmark{
			background-image: url("@/static/image/bookmark.png");
		}



	}

	.detail-header {
		z-index: 1;
		padding: 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.header-left-icon {
			width: 48rpx;
			height: 48rpx;
			background-image: url("@/static/image/back.png");
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.header-right {
			display: flex;
			align-items: center;

			.left-icon,
			.right-icon {
				width: 48rpx;
				height: 48rpx;
				background-repeat: no-repeat;
				background-size: 100%;

			}

			.left-icon {
				background-image: url("@/static/image/share.png");
			}

			.right-icon {
				background-image: url("@/static/image/more2.png");
			}

		}



	}

	.detail-section {
		width: 100%;
		padding: 76rpx 0 100rpx;

		.detail-title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.dateil-title-left {
				display: flex;
				align-items: center;

				.title-icon {
					width: 100rpx;
					height: 100rpx;
					// background-color: #000;
					// border-radius: 50%;
					image{
						border: 1rpx solid #ececec;
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}

				.news-name {
					padding-left: 10rpx;
					// display: flex;

					.p-name {
						font-size: 32rpx;
						font-weight: bold;
						padding-bottom: 10rpx;
					}

					.p-time {
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.dateil-follow {
				text-align: center;
				width: 162rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: $uni-color-primary;
				border-radius: 10rpx;
				color: #fff;
				font-size: 28rpx;
			}
			.dateil-follow-not{
				text-align: center;
				width: 162rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: #fff;
				border: 1px solid $uni-color-primary;
				border-radius: 10rpx;
				color: $uni-color-primary;
				font-size: 28rpx;
			}
		}


		.news-img {
			margin-top: 30rpx;
			width: 100%;
			// width: 760rpx;
			height: 496rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.news-content {
			width: 100%;
			padding: 20rpx 0;

			.news-location {
				font-size: 28rpx;
				color: #999;
				padding-bottom: 10rpx;
			}

			.news-title {
				font-size: 48rpx;
				color: #000;
				font-weight: bold;
			}

			.news-article {
				padding-top: 40rpx;
				text-align: justify;
				letter-spacing: 2rpx;
				text-indent: 2rem;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #4E4B66;
			}
		}


	}
</style>